.transform-skew {
  transform: skew(0, 4.274deg);
}

.shadow {
  text-shadow: 2px 2px 4px #888;
}

.aspect-1618-1000 {
  position: relative;
  padding-top: 61.8%;

  > * {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

.max-width-1-2 {
  max-width: $content-width / 2;
}

.justify-between {
  justify-content: space-between;
}

.flex-1 {
  flex-grow: 1;
}

.prepend-empty::before {
  content: '';
}

.nav-next {
  &::before {
    content: 'Next: ';
  }
  &::after {
    content: ' »';
  }
}

.nav-prev {
  &::before {
    content: '« Prev: ';
  }
}

.code-example {
  .control-panel {
    background: #fff;
    top: 1ex;
    left: 1ex;
    right: auto;
    bottom: auto;
    max-height: calc(100% - 2ex);
    opacity: 0.85;
    overflow: auto;
    padding: 1ex;

    h3 {
      margin: 0;
    }
    
    label {
      display: block;
      text-align: center;
    }

    input:not([type=checkbox]) {
      display: block;
    }
  }
}
